<template>
  <div>
    <div class="serve-user">
      <div class="user-avatar">
        <img :src="userInfo.avatar" />
      </div>
      <div class="serve-message">
        <p style="font-size: 20px">{{ userInfo.username }}</p>
        <div class="serve-skills">
          {{ userInfo.favoriteCount }}
          <p>获赞</p>
          {{ userInfo.followCount }}
          <p>关注</p>
          {{ userInfo.followerCount }}
          <p>粉丝</p>
          <span style="margin: 0 20px 0 -8px">|</span>
          <p>音秀号:</p>
          {{ userInfo.account }}
          <span style="margin: 0 20px">|</span>
          <p>发起授权</p>
        </div>
        <p class="intro">{{ userInfo.signature }}</p>
      </div>
    </div>
    <div class="carousel-photos">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item, index) in serveCarousel" :key="index">
          <img :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="data">
      <div class="data-left">
        <div class="data-box">
          <div class="data-title">
            <span class="data-name">视频数据</span>
            <router-link to="/dataScreening">
              <span class="data-btn"
                >查看更多<i class="el-icon-arrow-right"></i></span
            ></router-link>
          </div>
          <div class="statistical-table">
            <ul>
              <router-link to="/dataScreening"
                ><li>
                  <p>主页访问量</p>
                  <span>{{ serveHomeData.homeVisitNum }}</span>
                </li></router-link
              >
              <router-link to="/dataScreening"
                ><li>
                  <p>播放总量</p>
                  <span>{{ serveHomeData.playNum }}</span>
                </li></router-link
              >
              <router-link to="/dataScreening"
                ><li>
                  <p>粉丝总量</p>
                  <span>{{ serveHomeData.fansNum }}</span>
                </li></router-link
              ><router-link to="/dataScreening"
                ><li>
                  <p>收藏总量</p>
                  <span>{{ serveHomeData.worksCollectNum }}</span>
                </li></router-link
              >
              <router-link to="/dataScreening"
                ><li>
                  <p>点赞总量</p>
                  <span>{{ serveHomeData.worksLikeNum }}</span>
                </li></router-link
              >
              <router-link to="/dataScreening"
                ><li>
                  <p>评论总量</p>
                  <span>{{ serveHomeData.worksCommentNum }}</span>
                </li></router-link
              >
            </ul>
          </div>
        </div>
        <div class="weekly-paper">
          <div class="data-title">
            <span class="data-name">创作者周报</span>
            <router-link to="/weeklyReport"
              ><span class="data-btn"
                >查看更多<i class="el-icon-arrow-right"></i></span
            ></router-link>
          </div>
          <div class="paper-content">
            <div class="paper-content-left">
              上周你的创作表现超过了<span>{{ workReport.worksNumExceed }}%</span
              >的同级创作者
            </div>
            <div class="paper-content-right">
              上周你的创作表现超过了<span>{{ workReport.playExceed }}%</span
              >的同级创作者
            </div>
          </div>
        </div>
      </div>
      <div class="data-right">
        <div class="calendar">
          <el-calendar v-model="calendarValue" id="calendar">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div @click="chooseDay(date)">
                <el-row>
                  <el-col :span="10">
                    <div class="calendar-day">
                      {{ data.day.split("-").slice(2).join("-") }}
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="blue budge" v-if="dealMyDate(date)"></div>
                  </el-col>
                </el-row>
              </div>
            </template>
          </el-calendar>
        </div>
        <div class="events">
          <div class="events-title">
            <span class="events-name"
              >{{ monthActivityList[activeIndex].day | formatDate }}活动</span
            >
            <span class="events-btn"
              >共{{
                monthActivityList[activeIndex].activityList.length
              }}个进行中<i class="el-icon-arrow-right"></i
            ></span>
          </div>
          <div class="events-things">
            <ul>
              <li
                v-for="(activity, index) in monthActivityList[activeIndex]
                  .activityList"
                :key="index"
              >
                <span></span>
                <p>{{ activity.activityTitle }}</p>
                <div>
                  {{ activity.startTime | filtersDate }}-{{
                    activity.endTime | filtersDate
                  }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="line-chart" ref="mychartRef" id="mychart"></div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import * as echarts from "echarts";
import {
  getServeHomeApi,
  getServeCarouselApi,
  getActivityListApi,
  getWorkReportApi,
} from "@/api/serveHome";
export default {
  data() {
    return {
      workReport: {},
      serveCarousel: [],
      worksNumData: [],
      worksTime: [],
      serveHomeData: {},
      monthActivityList: [],
      activeIndex: 0,
      userInfo: this.$store.state.userInfo,
      calendarValue: new Date(),
    };
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let strs = time.split("-");
      return strs[1] + "月" + strs[2] + "日";
    },
    filtersDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "MM月dd日");
    },
  },
  mounted() {
    setTimeout(() => {
      this.initEcharts();
    }, 1000);
  },
  created() {
    this.getActivityListFun();
    this.getServeHomeFun();
    this.getServeCarouselFun();
    this.getWorkReportFun();
  },
  methods: {
    chooseDay(date) {
      this.activeIndex = date.getDate() - 1;
    },
    getServeHomeFun() {
      getServeHomeApi().then((res) => {
        if (res.data.code == 200) {
          this.serveHomeData = res.data.data;
          this.worksTime = res.data.data.twoWeekFiledWorksMap.date;
          this.worksNumData = res.data.data.twoWeekFiledWorksMap.wv;
          // this.initEcharts();
        }
      });
    },
    getServeCarouselFun() {
      getServeCarouselApi().then((res) => {
        if (res.data.code == 200) {
          this.serveCarousel = res.data.data;
        }
      });
    },
    getWorkReportFun() {
      getWorkReportApi().then((res) => {
        if (res.data.code == 200) {
          this.workReport = res.data.data;
        }
      });
    },

    getActivityListFun() {
      getActivityListApi().then((res) => {
        if (res.data.code == 200) {
          this.monthActivityList = res.data.data;
        }
      });
    },
    dealMyDate(date) {
      return this.monthActivityList[date.getDate() - 1].activityList.length > 0;
    },

    initEcharts() {
      // 新建一个promise对象
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        var myChart = echarts.init(this.$refs.mychartRef);
        const option = {
          title: {
            text: "最近发布作品",
          },
          // legend: {
          //   data: ["Publish the video"],
          // },
          xAxis: {
            type: "category",
            data: this.worksTime,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "Publish the video",
              stack: "Total",
              data: this.worksNumData,
              type: "line",
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
  },
};
</script>

<style>
.budge {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-top: 22px;
}
.blue {
  background-color: #409eff;
}
.el-calendar-table .el-calendar-day {
  height: 50px;
}
* {
  padding: 0;
  margin: 0;
}
.user-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.serve-user {
  width: 94%;
  padding: 0 15px;
  margin: auto;
  background: #fff;
  height: 130px;
  box-shadow: 0px 2px 2px 2px #e7e7e7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.serve-message {
  margin-left: 15px;
  line-height: 1.9;
}
.serve-skills {
  display: flex;
  font-size: 13px;
}
.serve-skills p {
  color: #9a9b9c;
  width: 55px;
  margin-left: 4px;
}
.serve-skills span {
  color: #d0d0d0;
}
.intro {
  font-size: 12px;
  color: #9a9b9c;
}
.carousel-photos {
  height: 140px;
  width: 94%;
  margin: 10px auto;
}
.carousel-photos img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
}
.carousel-photos .el-carousel__container {
  height: 140px;
}
.data {
  width: 94%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}
.data-left {
  width: 70%;
}
.data-box {
  background: #fff;
  border-radius: 8px;
  padding-bottom: 10px;
}
.weekly-paper {
  background: #fff;
  border-radius: 8px;
  margin-top: 8px;
}
.data-title {
  height: 50px;
  border-bottom: 1px solid #f8f8f8;
  padding: 0 10px;
  line-height: 50px;
  margin-bottom: 5px;
}
.calendar .el-calendar__body {
  padding: 0px 10px 0px;
}
.events-title {
  height: 30px;
  padding: 0 10px;
  margin: 5px;
  line-height: 30px;
}
.events-name {
  font-size: 16px;
}
.events-btn {
  float: right;
  font-size: 12px;
  color: #929292;
}
.data-name {
  font-size: 20px;
  font-weight: 600;
}
.data-btn {
  float: right;
  font-size: 14px;
  color: #929292;
}
.data-right {
  width: 28%;
  background: #fff;
  border-radius: 8px;
}
.statistical-table ul {
  display: flex;
  flex-wrap: wrap;
}
.statistical-table ul li {
  cursor: pointer;
  width: 268px;
  height: 120px;
  line-height: 2.6;
  padding: 15px 15px;
  margin: 5px 10px;
  box-sizing: border-box;
  background: #fafafb;
  border-radius: 8px;
  color: #000;
}
.statistical-table ul li p {
  font-size: 14px;
  color: #242323;
}
.line-chart {
  width: 94%;
  height: 300px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  margin: 10px auto;
}
.paper-content {
  min-height: 142px;
  display: flex;
}
.paper-content > div {
  width: 50%;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.paper-content-left {
  background-repeat: no-repeat;
  background-position: 15% 30%;
  background-image: url(https://sf1-cdn-tos.douyinstatic.com/obj/eden-cn/vfzveh7bfpoznuhbo/douyin-creator/home/week-report-1.svg);
}
.paper-content-right {
  background-repeat: no-repeat;
  background-position: 15% 30%;
  background-image: url(https://sf1-cdn-tos.douyinstatic.com/obj/eden-cn/vfzveh7bfpoznuhbo/douyin-creator/home/week-report-2.svg);
}
.events-things ul li {
  display: flex;
  height: 30px;
  align-items: center;
}
.events-things ul li span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 5px;
  background: #1890ff;
}
.events-things ul li p {
  font-size: 13px;
  width: 62%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
}
.events-things ul li > div {
  color: #9a9b9c;
  font-size: 12px;
  transform: scale(0.9);
}
</style>
